<template>
  <div class="selfServiceEdit">
    <!-- 自助服务受理详情弹窗 -->
    <el-dialog
      title
      :visible.sync="dialogVisible"
      destroy-on-close
    >
      <List :column="2" sep=":">
        <ListItem label="联系人" :value="curData.customer"></ListItem>
        <ListItem label="联系电话" :value="curData.customerPhone">
          <div class="justify" style="justify-content: flex-start;">
            <span>{{ curData.customerPhone }}</span>
            <SvgIcon icon-class="#dianhuaboda-solid" style="height: 1.2em !important;padding-left:5px;position: relative;top:-3px;" class-name="call-icon" @click="selPhone()"></SvgIcon>
          </div>
        </ListItem>
        <ListItem label="业务类型" :value="typeName(curData.type)"></ListItem>
        <ListItem label="地址" :value="curData.address" :span="24"></ListItem>
        <ListItem label="需求描述" :span="24">
          <div class="justify">
            <span>{{ curData.demandDetails }}</span>
            <Button type="primary" @click="openImagePreview">查看图片</Button>
          </div>
        </ListItem>
        <ListItem label="关联工单号" :span="24">
          <el-input v-model="workOrderCode" :disabled="!showBtn" placeholder="请输入关联工单号"></el-input>
        </ListItem>
        <ListItem label="备注" :span="24">
          <el-input v-model="handlerRemarks" type="textarea" :disabled="!showBtn" :autosize="{minRows: 4}" placeholder="请输入备注"></el-input>
        </ListItem>
        <ListItem v-if="showBtn" :span="24">
          <template v-slot:content>
            <div style="text-align:center;">
              <Button type="primary" @click="handleService">处理完成</Button>
            </div>
          </template>
        </ListItem>
      </List>
      <el-dialog title="请选择要呼叫的号码" :visible.sync="dialogVisible2" :append-to-body="true" width="25%">
        <el-radio-group v-model="wantCallPhone">
          <el-radio v-for="(item,index) in phoneList" :key="index" :label="item">{{ item }}</el-radio>
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <Button @click="closeSelPhone">取消</Button>
          <Button type="primary" @click="callPhone">确定</Button>
        </span>
      </el-dialog>
      <ImagePrevew ref="imagePrevew"></ImagePrevew>
    </el-dialog>
  </div>
</template>
<script>
import { List, ListItem } from '@/components/List'
import Button from '@/components/Button'
import ImagePrevew from './ImagePrevew'
import { getAppSelfServiceById, putAppSelfService } from '@/api/selfService'
export default {
  name: 'SelfServiceEdit',
  components: {
    List,
    ListItem,
    Button,
    ImagePrevew
  },
  props: {
    typeName: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      curData: {},
      workOrderCode: '',
      handlerRemarks: '',
      dialogVisible2: false,
      phoneList: [],
      wantCallPhone: '',
      visible: false,
      createAt: ''
    }
  },
  computed: {
    showBtn() {
      return !this.curData.state || this.curData.state.toString() === '0'
    }
  },
  activated() {
    if (this.$route.name === 'SelfService' && this.visible) {
      this.dialogVisible = true
      // if (this.phoneList.length > 1) {
      //   this.dialogVisible2 = true
      // }
      this.visible = false
    }
  },
  methods: {
    // 处理报修
    handleService() {
      if (!this.workOrderCode) {
        this.$message.error('请输入关联工单！')
        return
      }
      if (!this.handlerRemarks) {
        this.$message.error('请输入备注！')
        return
      }
      const data = {
        workOrderCode: this.workOrderCode,
        handlerRemarks: this.handlerRemarks,
        id: this.curData.id,
        state: 1
      }
      return putAppSelfService(data).then(res => {
        this.$message.success('处理成功！')
        this.dialogVisible = false
        this.$emit('refresh')
      })
    },
    // 打开弹窗
    openDailog(id) {
      getAppSelfServiceById(id).then(res => {
        this.curData = res.data
        this.workOrderCode = res.data.workOrderCode || ''
        this.handlerRemarks = res.data.handlerRemarks || ''
        this.dialogVisible = true
        this.createAt = new Date().getTime()
      }).catch(() => {
        this.$message.error('获取自助服务详情数据失败！')
      })
    },
    selPhone() {
      this.phoneList = this.curData.customerPhone.split(',')
      if (this.phoneList.length > 1) {
        this.dialogVisible2 = true
      }
      if (this.phoneList.length === 1) {
        this.wantCallPhone = this.phoneList[0]
        this.callPhone()
      }
    },
    callPhone() {
      if (!this.wantCallPhone) {
        return this.$message.info('请先选择要呼叫的电话号码')
      }
      this.$router.push({ name: 'CallOut', query: { createAt: this.createAt, callTel: this.wantCallPhone, name: this.curData.customer, task: true }})
      this.visible = true
      this.dialogVisible = false
      this.dialogVisible2 = false
    },
    closeSelPhone() {
      this.wantCallPhone = ''
      this.dialogVisible2 = false
    },
    openImagePreview() {
      if (!this.curData.selfServiceAnnexList) {
        return this.$message.info('没有可查看的图片')
      }
      this.$refs.imagePrevew.openDailog(this.curData.selfServiceAnnexList, this.curData.annexZipPath)
    }
  }
}
</script>
<style lang='scss' scoped>
.img_child{
    border: 1px solid #999;
    padding: 3px;
    border-radius: 2px;
    box-sizing: border-box;
    height: auto;
    width: 100%;
}
.justify{
  display: flex;
  justify-content: space-between;
  font-size: 14px !important;
  // align-items: center;
  span{
    color:rgba(0, 0, 0, 0.65);
    font-size: 12px;
  }
}
</style>
